<!--
 * @Description: 弹窗组件
 * @Author: Zhangx
 * @Date: 2023-05-15 15:56:12
 * @LastEditors: Zhangx
 * @LastEditTime: 2023-07-28 14:50:34
-->
<template>
  <div class="dialog_component">
    <el-dialog v-model="isDialog" :show-close="false" :before-close="$emit('beforeClose')" :close-on-click-modal="false" :width="dialogWidth">
      <template #header>
        <div class="dialog_header">
          <span class="title" v-if="dialogTitle">{{ props.dialogTitle }}</span>
          <el-icon class="icon" @click="$emit('cancelClick')" v-if="closeIcon">
            <CircleClose />
          </el-icon>
        </div>
      </template>
      <slot name="body" class="dialog_body" />
      <template #footer>
        <div class="dialog_footer">
          <el-button :size="cancelButtonSize" :type="cancelButtonType" v-show="cancelText" @click="$emit('cancelClick')"
            class="cancelBtn">
            {{ props.cancelText }}
          </el-button>
          <el-button :size="saveButtonSize" :type="saveButtonType" v-show="saveText" @click="$emit('saveClick')"
            class="saveBtn">
            {{ props.saveText }}
          </el-button>
          <el-button :size="confirmButtonSize" :type="confirmButtonType" v-show="confirmText"
            @click="$emit('confirmClick')" class="confirmBtn">
            {{ props.confirmText }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { CircleClose } from '@element-plus/icons-vue'
defineEmits(['cancelClick', 'beforeClose', 'confirmClick', 'saveClick'])
const props = defineProps({
  dialogVisible: Boolean,
  dialogWidth: {
    type: String,
    default: ''
  },
  closeIcon: {
    type: Boolean,
    default:true
  },
  dialogTitle: {
    type: String,
    default: ''
  },
  cancelText: {
    type: String,
    default: ''
  },
  confirmText: {
    type: String,
    default: ''
  },
  saveText: {
    type: String,
    default: ''
  },
  cancelButtonSize: {
    type: String,
    default: 'normal'
  },
  cancelButtonType: {
    type: String,
    default: 'default'
  },
  confirmButtonSize: {
    type: String,
    default: 'normal'
  },
  confirmButtonType: {
    type: String,
    default: 'primary'
  },
  saveButtonSize: {
    type: String,
    default: 'normal'
  },
  saveButtonType: {
    type: String,
    default: 'primary'
  }
})

let isDialog = computed(() => props.dialogVisible)
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
  // width: 600px !important;
  // padding-bottom: 65px;
  background: #ffffff;
  box-shadow: -1px 0px 15px 0px rgba(180, 204, 222, 0.5);
  border-radius: 16px;
  border: 1px solid #d8d8d8;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .el-dialog__header {
    width: 100%;
    height: 0px;
    padding: 0;
    position: relative;
    left: 8px;
  }

  .dialog_header {
    padding: 20px 20px 0px;
    // height: 90px;
    font-size: 19px;
    font-family: PingFangHK-Semibold, PingFangHK;
    font-weight: 600;
    display: flex;
    justify-content: flex-end;

    .title {
      margin: 0 auto;
    }

    // display: flex;
    // justify-content: space-between;

    img {
      width: 22px;
      height: 22px;
      cursor: pointer;
    }
  }

  .el-dialog__body {
    margin-top: 50px;
    width: 100%;
  }

  .btn-blue {
    margin-top: 30px;
    position: absolute;
    bottom: 45px;
    left: 50%;
    margin-left: -44px;
  }

  .btn-white {
    margin-top: 30px;
    position: absolute;
    bottom: 45px;
    left: 35%;
    margin-left: -44px;
  }
}

.cancelBtn {
  margin-right: 70px;
}

.saveBtn {
  margin-right: 70px;
}
</style>
